<template>
        <el-form
            :model="Form"
            :rules="rules"
            ref="ruleszeng"
            class="demo-ruleForm"
            style="margin-bottom: 80px;"
          >
            <el-form-item  prop="title">
              <el-input v-model="Form.title"></el-input>
            </el-form-item>
            <el-form-item  prop="content">
                 <div class="editor">
                  <!-- 绑定 ref -->
                  <quill-editor
                    theme="snow"
                    v-model:content="Form.content"
                    contentType="html"
                    ref="quillEditorRef"
                  >
                  </quill-editor>
                </div>
            </el-form-item>
            <el-form-item label="文章状态" prop="state" >
              <el-select v-model="Form.state" placeholder="请选择文章状态">
                <el-option label="草稿" value="草稿" />
                <el-option label="已发布" value="已发布" />
              </el-select>
            </el-form-item>
            <el-form-item label="文章类型" prop="categoryId">
              <el-select v-model="Form.categoryId" placeholder="请选择文章类型">
                <el-option v-for="item in fenleiList" :key="item.id"
                :label="item.categoryName" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="文章封面" prop="coverImg">
              <!-- http-request="upload" 我们可以在这个方法中写代码完成文件的上传-->
              <el-upload
                  class="avatar-uploader"
                  :http-request="upload"
                >
                  <img v-if="Form.coverImg" :src="Form.coverImg" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleszeng)">立即创建</el-button>
              <el-button @click="resetForm(ruleszeng)">重置</el-button>
            </el-form-item>
          </el-form>
</template>
<script setup>
import { ref, defineProps} from 'vue'
//引入请求
import {jiarticle,updatearticle} from '@/api/article.js'
// 引入提示框
import { ElMessage,ElMessageBox} from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
//导入组件和样式：
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const quillEditorRef = ref(null); // 定义 ref
//引入pinia
import {useUserStore} from '@/stores/token.js'; 
//获取容器对象
const us=useUserStore(); 
//获取容器对象中的数据
console.log(us.denglu); 
//获取登录人的id
const id=us.denglu.id;
//引入上传图片的组件
import oss from '@/config/oss.js';

//声明数据 
//defineProps 是个方法 在这个方法中可以定义父组件传递过来的数据
const props = defineProps({
    //父组件传递过来的数据，这个变量由调用者来传值
    Form: {
    type: Object,  //这个变量的类型是数值
    default: () => ({})  //默认值为空
  },
  fenleiList: {
    type: Array,
    default: () => []
  }
})

//添加文章表单校验
const ruleszeng=ref(null)
//校验文章标题，文章内容
const rules = ref({
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' },
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' },
 ],
  state: [
  { required: true, message: '请选择文章状态', trigger: 'change' },
  ],
  categoryId: [
  { required: true, message: '请选择文章分类', trigger: 'change' },
  ],
  coverImg: [
  { required: true, message: '请选择文章封面', trigger: 'change' },
  ]
})

// file 代表 点击的文件
// 把文件上传到oss服务器 
// 客户端要传很多文件 有可能有重名 
const upload=(wenjian)=>{
    //上传到桶的这个文件夹中 如果没有的话就新建一个
    const wenjianjia='article/';
    //源文件名
    const oldname=wenjian.file.name; 
    //新文件名
    const newname=`${wenjianjia}--${Date.now()}---${oldname}`;
    //第一个参数 新文件的名字
    //第二个参数 客户端上传来的文件本身
    oss.put(newname,wenjian.file).then(res=>{
      console.log('上传成功');
      console.log(res); //客户端给你响应的内容
      props.Form.coverImg=res.url;
    })
}

//声明子组件要调用父组件中的哪些方法
const emit = defineEmits(['shuaxin'])

//添加文章
const zeng=async()=>{
    props.Form.createUser=id
    console.log(props.Form);
    const res=await jiarticle(props.Form);
    console.log(res);
    if(res.code==20005){
        ElMessage.success(res.message)
        //刷新页面
        emit('shuaxin')
    }else{
        ElMessage.error(res.message)
    }
}

//编辑文章
const bianjiarticle=async()=>{
  const res=await updatearticle(props.Form);
  console.log(res);
    if(res.code==20031){
        ElMessage.success(res.message)
        //刷新页面
        emit('shuaxin')
      }else{
        ElMessage.error(res.message)
     }
}

//立即创建按钮
const submitForm = (obj) => {
  obj.validate((valid) => {
    if (valid && props.Form.coverImg) {
      ElMessage({
        message: '校验成功',
        type: 'success',
      });
      //判断走新增还是走修改
      if(props.Form.id==undefined){
          zeng();
      }else{
          bianjiarticle();
      }
      emit('shuaxin',false)
    } else {
      ElMessage.error('校验失败');
      if (!props.Form.coverImg) {
        ElMessage.error('请上传文章封面');
      }
    }
  });
}

//重置表单
const resetForm = (obj) => {
  obj.resetFields();
  if (quillEditorRef.value) {
    quillEditorRef.value.setContents([]); // 清空富文本编辑器内容
  }
  props.Form.coverImg = ''; // 清空封面图片
}

</script>


<style lang='scss' scoped>
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

//文章封面样式
.common-layout{
        border: 2px green solid; 
        width: 1000px;
        height: 600px;
        box-shadow: 0px 0px 5px 5px gainsboro;
    }
    .el-header{
         display: flex;
         border-bottom: 2px gainsboro solid;
    }
    .avatar-uploader {
    :deep() {
        .avatar {
            width: 200px;
            height: 278px;
            display: block;
            border-radius: 6px;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 278px;
            height: 278px;
            text-align: center;
        }
    }
}
</style>